<script lang="ts" setup>

import {ref, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'

import{apiUserList,apiUserDetail} from "@/api/api"
import{formatTagUserStatus,formatUserStatus,formatUserType} from "@/utils/format"

const logList = ref([])
const reqParmas = ref({
  pageNum : 1,
  pageSize :15,
  total:0,
})
const userStatus = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '锁定',
  },
] 
const userType = [
  {
    value: "admin",
    label: '管理员',
  },
  {
    value: "expert",
    label: '专家',
  },
  {
    value: "common",
    label: '教师',
  },

] 

async function handleUserList(){
 const req = {
    pageNum:reqParmas.value.pageNum,
    pageSize:reqParmas.value.pageSize,
  }
  if (reqParmas.value.name){
    req.username  = reqParmas.value.name
  }
if (reqParmas.value.userType){
    req.userType  = reqParmas.value.userType
  }
  if (reqParmas.value.userStatus){
    req.status  = reqParmas.value.userStatus
  }

  const data = await apiUserList(req)
  if (data.code != 0) {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }


  reqParmas.value.pageNum = data.pageNum
  reqParmas.value.total = data.total
  logList.value = data.rows

}

const jumpToUserCreate = ()=>{
  router.push({ path: '/user/create'})
}

const handleDetailClick =  (item)=>{
  router.push({ path: '/user/detail', query: { "id": item.id } })
}

onMounted(() => {
  handleUserList()
})

</script>

<template>
  <el-row :gutter="20" justify="space-between" >
    <el-col :span="4">
      <el-button type="primary" @click="jumpToUserCreate" >添加用户</el-button>
    </el-col>
    <el-col :span="16">
      <el-row justify="end" :gutter="10">
        <el-col  :span="4"> 
            <el-input v-model="reqParmas.name" placeholder="用户名" clearable />
        </el-col>
        <el-col  :span="4"> 
            <el-select v-model="reqParmas.userType"  placeholder="类型" clearable >
            <el-option
              v-for="item in userType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col  :span="4"> 
            <el-select v-model="reqParmas.userStatus"  placeholder="状态" clearable >
            <el-option
              v-for="item in userStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="2"> 
          <el-button   class='pagination' type="primary" :icon="Search" @click="handleUserList" >查询</el-button>
        </el-col>
      </el-row>
    </el-col>

  </el-row>



<div class="info_box">

  <el-table :data="logList" style="width: 100%">
    <el-table-column prop="username" label="用户名" width='200px' />
    <el-table-column prop="status" label="状态" width='100px' >
          <template  #default="item">
          <el-tag  :type="formatTagUserStatus(item.row.status)">
            {{formatUserStatus(item.row.status)}}
          </el-tag>
      </template>
    </el-table-column>s
    <el-table-column  prop="userType" label="类型" width='100px'>
      <template  #default="item">
          {{formatUserType(item.row.userType)}}
        </template>
    </el-table-column>
    <el-table-column  prop="email" label="邮箱" width='200px' />
    <el-table-column  prop="mobile" label="电话"  width='180px'/>
    <el-table-column  prop="loginIp" label="最近登录信息" width='300px' >
      <template  #default="item">
          {{item.row.loginIp}}/{{item.row.loginDate}}
        </template>
    </el-table-column>

    <el-table-column  prop="createTime" label="创建时间"  width='200px'/>
    <el-table-column label="操作" width="180" >
        <template  #default="item">
          <el-button link type="primary" @click="handleDetailClick(item.row)">详情</el-button>
          <el-button link type="danger" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-pagination class='pagination' size="large" :page-size="reqParmas.pageSize" layout=" prev, pager, next, total" :total="reqParmas.total"
      v-model:current-page="reqParmas.pageNum" @current-change="handleUserList" />

</div>

</template>